<template>
  <div class="todo-footer">
    <label>
      <input
        type="checkbox"
        :checked="donednum == allnum && donednum != 0"
        @click="handleallcheck"
      />
    </label>
    <span>
      <span>已完成{{ donednum }}</span> / 全部{{ allnum }}
    </span>
    <button class="btn btn-danger" @click="cleardone">清除已完成任务</button>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "Footer",
  props: ["updatetodoall", "todos", "clearalldoned"],
  setup(props) {
    const donednum = computed(
      () => props.todos.filter((item) => item.done).length
    );
    const allnum = computed(() => props.todos.length);
    function handleallcheck(e) {
      props.updatetodoall(e.target.checked);
    }
    function cleardone() {
      props.clearalldoned();
    }
    return {
      handleallcheck,
      donednum,
      allnum,
      cleardone,
    };
  },
});
</script>

<style lang="scss" scoped>
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
  label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    input {
      position: relative;
      top: -1px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  button {
    float: right;
    margin-top: 5px;
  }
}
</style>
